<!-- 上传页面 -->
<template>
    <div>
        <div class="imgContainer">
            <img v-if="imgBase64Url" :src="imgBase64Url" alt="">
        </div>
        <input type="file" name="file" @change="fileChange" />
    </div>
</template>

<script>
export default {
  data () {
    return {
      imgBase64Url: ''
    }
  },
  methods: {
    fileChange (e) {
      const file = e.target.files[0]
      console.log('上传的文件:', file)
      const _sliceBlob = new Blob([file]).slice(0, 50000)
      const _sliceFile = new File([_sliceBlob], 'test.jpg')
      console.log('_sliceFile:', _sliceFile)
      const fr = new FileReader()
      // readAsText
      fr.readAsDataURL(_sliceFile)
      const self = this
      fr.onload = function () {
        self.imgBase64Url = fr.result
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.imgContainer{
    width: 500px;
    height: 250px;
    background: #ccc;
    img{
        width: 100%;
        height: 100%;
    }
}
</style>